import React from 'react';
import styles from './index.less';
import { connect } from 'react-redux'
import { home, global } from '../../models'
import store from '../../store'
import { injectIntl, FormattedMessage } from 'react-intl'
import marked from 'marked';
import $ from 'jquery';

// import hljs from 'highlight.js';

const { getList, getUser } = home.effects
const { queryData } = global.effects

var rendererMD = new marked.Renderer();


// 服务端渲染时候window有可能为渲染 报错 所以要这样
if (typeof window !== 'undefined') {
    var hljs = require('highlight.js')
    hljs.initHighlightingOnLoad()

    //基本设置
    marked.setOptions({
        renderer: rendererMD,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });
}

@connect(({ home }) => ({
    home,
}))
export default class Home extends React.Component {

    async  componentDidMount() {

        // 初始化md文档
        this.initMd()
        
        this.props.dispatch({ type: 'home/showPostsAsync', payload: { name: 20 } })
    }

    // 初始化md 文档
    initMd = () => {
        var str = `# hahaha`
        str += `
        class aa = {
            document.getElememtById('aaa')
        }
        `
        $('#marked').html(marked(str))
    }

    // 切换语言
    changeLanguage = () => {
        this.props.dispatch({ type: 'global/setState', payload: { locale: 'zh' } })
    }

    render() {
        return (
            <div className={styles.content}>

                <img
                    src={require('../../assets/1.png')}
                    onClick={() => this.props.history.push('/test')}
                />

                <div>
                    {/* text:你好 */}
                    <FormattedMessage id="intl.hello" />
                </div>

                <button onClick={() => this.changeLanguage()}>
                    改变状态
                </button>

                <div id="marked" style={{ marginTop: '50px' }}>

                </div>

            </div>
        )
    }
}